<template>
  <el-dialog
    title="日报"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    destroy-on-close
    width="600px"
  >
    <div class="form" ref="form">
      <div class="item">
        <div v-for="i in reportsItem" :key="i.id">
          <div class="name">{{ i.name }}</div>
          <div
            v-for="(j, index) in jobFilter(i.job_reports)"
            :key="j.id"
            class="job"
          >
            <div>
              <span>{{ index + 1 }}.</span>
              <span v-if="j.overdue == 1">【{{ j.overdue_name }}】</span>
              <span v-else-if="j.danger == 1">【{{ j.danger_name }}】</span>
              <span>【{{ j.status_name }}】</span>
              <span v-if="j.progress != 100"
                >【进度{{ j.progress }}%,预计{{
                  dealDate(j.remark)
                }}完成】</span
              >
              <div>
                <div class="jobname">
                  <span>「任务」</span>
                  <span>{{ j.project_job_name }}</span>
                </div>
                <div class="jobremark">
                  <span>{{ dealRemark(j.remark) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer">
      <el-button type="primary" :loading="loading" size="medium" @click="doCopy"
        >复制</el-button
      >
      <el-button size="medium" plain @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
import _report from "@/common/api/project_job_report.js";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      isShow: false,
      reportsItem: [],
      successItems: [],
      noSuccessItems: [],
      riskItems: [],
      newDate: "",
    };
  },
  methods: {
    showDialog() {
      this.getReportList();
      this.isShow = true;
    },

    doCopy() {
      const copyText = this.$refs.form.innerText;
      // console.log(copyText, "11");
      this.copy(copyText);
    },

    copy(data) {
      let url = data;
      let oInput = document.createElement("textarea");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },

    async getReportList() {
      try {
        const result = await _report.getListAsync({
          page_size: 999,
          // begin_date: "2024-06-04",
          begin_date: this.newDate,
        });
        this.reportsItem = [];
        result.data.map((m) => {
          let found = this.reportsItem.find((r) => r.id == m.project_id);
          // 检查是否有当前项目
          if (!found) {
            found = {
              id: m.project_id, // 项目id
              name: m.project_name, // 项目名字
              job_reports: [], // 汇报列表
            };
            this.reportsItem.push(found);
          }

          found.job_reports.push(m);
        });
      } catch (error) {}
    },

    getNewDate() {
      const date = new Date();
      this.newDate = moment(date).format("yyyy-MM-DD");
    },
    dealDate(arr) {
      const date = arr.split("+");
      const end_date = moment(date[date.length - 1]).format("MM/DD");
      return end_date;
    },
    dealRemark(remarks) {
      const arr = remarks.split("+");
      arr.splice(arr.length - 1, 1);
      const remark = arr.join("");
      return remark;
    },

    jobFilter(jobreport) {
      const scItem = jobreport.filter(
        (obj, index) =>
          jobreport.findIndex(
            (item) => item.project_job_name == obj.project_job_name
          ) == index
      );
      return scItem;
    },
  },
  created() {
    this.getNewDate();
  },
};
</script>
  
  <style lang="scss" sooped>
.avatar-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0;
}

.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader .el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.form {
  .job {
    margin-left: 20px;
    padding: 2px;
    div {
      span {
        line-height: 1.5;
      }
      .jobname {
        text-indent: 0.5em;
      }
      .jobremark {
        text-indent: 1em;
      }
    }
  }
}
</style>
  